import Vue from 'vue'
import { debounce } from '@/utils'

export default () => {
  Vue.directive('selectScroll', {
    bind (el, binding) {
      //  如上图，我通过v-if来控制了两个select框，当没有binding.arg这个参数时，我只能监听到企业类型下的select框，所以，我通过传参控制了监听的哪个select框
      var className = '.' + binding.arg
      el.className = binding.arg
      // 获取滚动页面DOM
      const SCROLL_DOM = el.querySelector(`${className} .el-select-dropdown .el-select-dropdown__wrap`)
      // const SCROLL_DOM = el.querySelector(“.el-select-dropdown .el-select-dropdown__wrap“)
      SCROLL_DOM.addEventListener('scroll', debounce(function(e){
        // 当前的滚动位置 减去  上一次的滚动位置
        // 如果为true则代表向上滚动，false代表向下滚动
        const CONDITION = this.scrollHeight - this.scrollTop - 30 <= this.clientHeight
        // 如果已达到指定位置则触发
        if (CONDITION) {
          // 将滚动行为告诉组件
          binding.value(CONDITION)
        }
      }, 100))
    }
  })
}

